<template>
<div>

    <el-card class="box-card">
      <el-row :gutter="12">
        <el-col :span="5">
        <el-select v-model="value" placeholder="请选择" @focus="select">
            <el-option
            v-for="item,index in options"
            :key="index"
            :label="item.label"
            :value="index">
            </el-option>
        </el-select>
        </el-col>
       <el-col :span="4">
        <el-button  type="primary" @click="addMymember">添加组员</el-button>
        </el-col>

      </el-row> 

      <!-- 列表区域 -->
    <el-table
    :data="MemberList"
    style="width: 100%"
    >
    <el-table-column  prop="userId"   label="userId"   sortable   width="80"> </el-table-column>
    <el-table-column  prop="createTime"   label="创建日期"   sortable   width="180">

     </el-table-column>
         <el-table-column  prop="nickName"   label="nickName"   sortable   width="180" ></el-table-column>
    <el-table-column  prop="userName"   label="用户名"   sortable   width="180"> </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delMember(scope.row)"></el-button>
          </template>
        </el-table-column>
    </el-table>
    <!-- 分页 -->

    </el-card>

     
    
<!-- 这个是选择下载窗口-->
    
</div>
</template>
<script>
// 
import {getMyMembers,getMyLeaders,addMember,deleteMember  } from "@/api/group/group";
import axios from "axios";
import {
  getuserinfo,
  getuserrole
} from "@/api/system/daily";
import{listUser,getUser} from "@/api/system/user";
export default {
  name: "MyGroup",
  data() {
    return {
        MemberList:[],
        value:null, //这个添加组员的id
        options:[],
        list_User:[],//保存所有用户的信息


        userId:null
    }
  },
  created(){
      
  },
  mounted() {
    this.getAllCommonUsers();
      this.getMembers();
  },
  methods: {
    async getMembers() {
         var response=await getuserinfo()
          this.userId=response.user.userId;

          //组长就显示组员 ，组员 查到leader 和组员
          if(response.user.roles[0].roleKey=="admin"||response.user.roles[0].roleKey=="leader"){
             var re= await getMyMembers(this.userId)
            // console.log(re) re 数组是自己的组员
            var tmp=[];
            this.MemberList=[]
            for(var i=0;i<this.list_User.length;i++){
                for(var j=0;j<re.rows.length;j++){
                    if(this.list_User[i].userId==re.rows[j]){
                        tmp.push(this.list_User[i]);
                        break;
                    }
                        
                }

            }
            this.MemberList=tmp;
            
            //去除自己组的，剩下的其他员工是列表
          }else if(response.user.roles[0].roleKey==="common"){
              var re =await getMyLeaders(this.userId)
              console.log(re)
          }
          
      
    },
    //获取所有的普通用户
    async getAllCommonUsers(){

        this.list_User=await listUser();
        this.list_User=this.list_User.rows;
        // console.log("所有用户")
        var tmp=[];
        for(var i=0;i<this.list_User.length;i++){
            var role=await getUser(this.list_User[i].userId);
            // console.log(role.data)
            var role=role.data
            if(role.roles[0].roleKey==="common"){
                tmp.push(this.list_User[i])
            }
        }
        this.list_User=[];
        this.list_User=tmp;
        
    },
    delMember(row){
        
        deleteMember({
            leader_id: this.userId,
            member_id: row.userId
        }).then(resp=>{
            if(resp.code===200){
                this.$modal.msgSuccess("删除成功");
                for(var i=0;i<this.MemberList.length;i++){
                    if(this.MemberList[i].userId===row.userId){
                        this.MemberList.splice(i,1)
                        break;
                    }
                };
                this.options.push({
                    value:row.userId,
                    label:row.userName
                })
            }
        }).catch(()=>{})
      
    },
    async addMymember(){
        if(this.value==null){
            this.$modal.msgSuccess("请选择");
            return
        }
        console.log(this.value);
        var resp=await addMember({
            leader_id:this.userId,
            member_id:this.options[this.value].value
        })
        let m_id=this.options[this.value].value;
        // console.log(resp)
        if(resp.code===200){
            this.value=null;
            
            this.$modal.msgSuccess("添加成功");
            this.getMembers();
        }
        
    },
    select(){
        this.options=[];
            for(var i=0;i<this.list_User.length;i++){
                var flag=1;
                for(var j=0;j<this.MemberList.length;j++){
                    if(this.list_User[i].userId==this.MemberList[j].userId){
                        flag=0;
                        break;
                    }
                        
                }
                if(flag==1){
                    this.options.push(
                    {
                        value:this.list_User[i].userId,
                        label:this.list_User[i].userName
                    }
                )
                }
            }
    }
    
}
}
</script>
<style  scoped>
.el-breadcrumb {
  margin-bottom: 15px;
}
.el-card {
  box-shadow: 0 1px 1px;
}
.card-bottom{
    margin-bottom: 10px;
    padding-left: 40%;
}
.el-table{
  margin-top:10px;
}
</style>
